<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/tableHead :: tableHead(~{::title},~{::link},~{::style})">
    <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="content-language" content="zh-CN" />-->
    <title th:text=${title}></title>
    <!-- 这儿引用单独的css link -->
    <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- select2样式 -->
    <link th:href="@{/static/admin/assets/js/select2/css/select2.min.css}" rel="stylesheet"/>
    <!-- 用户界面自定义css -->
    <link th:href="@{/static/admin/consumer/css/consumer-add.css}" rel="stylesheet"/>
    <!-- 文件上传css-->
    <link th:href="@{/static/admin/assets/js/dropZone/downloads/css/dropzone.css}" rel="stylesheet"/>
    <style type="text/css">
        .draggable {
            cursor: move
        }
    </style>
</head>

<body>

<div class="content-wrap">
    <div class="row">
        <div class="col-sm-12">
            <div class="nest" id="elementClose">
                <div class="">
                </div>
                <div class="body-nest" id="element">
                    <div class="panel-body">
                        <form class="form-horizontal m" id="form-add">
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">登录名称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="username" name="username"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">登录密码：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="password" id="password" name="password"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">昵称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="nickname" name="nickname"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">性别：</label>
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="male" value="男" name="gender" checked="">
                                    <label for="male"><font style="vertical-align: inherit;"><font
                                            style="vertical-align: inherit;"> 男 </font></font></label>
                                </div>
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="female" value="女" name="gender" checked="">
                                    <label for="female"><font style="vertical-align: inherit;"><font
                                            style="vertical-align: inherit;"> 女 </font></font></label>
                                </div>
                            </div>
                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label ">出生日期：</label>
                                <div class="col-sm-8">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type='text' class="form-control" id="birthdate" name="birthdate"/>
                                        <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-time"></span>
                                            </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">身份证号：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="id_number" name="idNumber"/>
                                </div>
                            </div>
                            <!--<div class="form-group">
                                <label class="col-sm-3 control-label ">家庭详细地址：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="home_address" name="homeAddress"/>
                                </div>
                            </div>-->
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">家庭详细地址：</label>
                                <span class="col-sm-2">
                                        <select class="form-control" id="province_select" name="provinceCode">
                                            <option th:each="list : ${provinceList}" th:text="${list.provinceName}"
                                                    th:value="${list.provinceCode}">First</option>
                                        </select>
                                    </span>
                                <span class="col-sm-2">
                                        <select class="form-control" id="city_select" name="cityCode">

                                        </select>
                                    </span>
                                <span class="col-sm-2">
                                        <select class="form-control" id="area_select" name="areaCode">

                                        </select>
                                    </span>
                                <sapn class="col-sm-2">
                                    <select class="form-control" id="street_select" name="streetCode">

                                    </select>
                                </sapn>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="detailed_address"
                                           name="detailedAddress" placeholder="请输入详细地址"/>
                                </div>
                            </div>

                            <div class="form-group draggable">
                                <label class="col-sm-3 control-label ">用户照片上传：</label>
                                <div class="col-sm-8">
                                    <div id="dropz" class="dropzone"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-3">
                                    <input type="text" id="userPic" class="form-control" name="userPic"
                                           style="display: none">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label ">监护人手机号：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="phone" name="phone"/>
                                </div>
                            </div>
                            <!--<div class="form-group">
                                <label class="col-sm-3 control-label ">权限授权：</label>
                                <div class="col-sm-8">

                                    <div th:each="m : ${tsysRoleList}" class="checkbox checkbox-primary">
                                        <input th:id="${m.id}" class="sqcheckbox" name="roles" th:value="${m.id}"
                                               type="checkbox">
                                        <label th:for="${m.id}" th:text="${m.name}"></label>
                                    </div>

                                </div>
                            </div>-->
                            <div class="form-group">
                                <div class="form-control-static col-sm-offset-9">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"
        type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>


<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/select2/js/select2.full.min.js}" type="text/javascript"></script>
<!-- jqueryForm序列化 -->
<script th:src="@{/static/js/jqueryFormSerializeJson.js}" type="text/javascript"></script>
<!-- consumer自定义 js -->
<script th:src="@{/static/admin/consumer/js/consumer-add.js}" type="text/javascript"></script>
<!--文件上传dropzone.js -->
<script th:src="@{/static/admin/assets/js/dropZone/lib/dropzone.js}" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        //时间控件
        $("#datetimepicker1").datetimepicker({
            format: "yyyy-mm-dd",
            /*禁用以前的日期，只能选择当今或者未来日期*/
            //startDate: new Date(),
            autoclose: true,
            todayBtn: true,
            language: 'zh-CN',
            initialDate: new Date(),
            minView: 1
        });

        //文件上传
        Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误
        var myDropzone = new Dropzone("#dropz", {
            url: "/QiNiuCloudController/uploadToQiNiu",//文件提交地址
            method: "post",  //也可用put
            paramName: "file", //默认为file
            maxFiles: 1,//一次性上传的文件数量上限
            maxFilesize: 2, //文件大小，单位：MB
            acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
            addRemoveLinks: true,
            parallelUploads: 1,//一次上传的文件数量
            //previewsContainer:"#preview",//上传图片的预览窗口
            dictDefaultMessage: '拖动文件至此或者点击上传',
            dictMaxFilesExceeded: "您最多只能上传1个文件！",
            dictResponseError: '文件上传失败!',
            dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
            dictFallbackMessage: "浏览器不受支持!",
            dictFileTooBig: "文件过大上传文件最大支持.",
            dictRemoveLinks: "删除",
            dictCancelUpload: "取消",
            init: function () {
                this.on("addedfile", function (file) {
                    //上传文件时触发的事件

                });
                this.on("success", function (file, data) {
                    //上传成功触发的事件
                    if (data != null && data != "") {
                        if (data.code == 200) {
                            console.log(data.url);
                            /*$("#userPic").val(data.data);*/
                            $("#userPic").val("http://" + data.url);
                            /*$("#userPic").show();*/
                        } else {
                            $.modal.alertError("文件为null！");
                            myDropzone.removeFile(file);
                        }
                    }

                });
                this.on("error", function (file, data) {
                    //上传失败触发的事件
                    $.modal.alertError("上传失败！");
                });
                this.on("removedfile", function (file) {//删除文件触发结果
                    $.ajax({
                        url: window.rootPath + "/FileController/del_file",
                        type: "post",
                        data: {"ids": $("#userPic").val()},
                        success: function (data) {
                        }
                    })
                    $("#userPic").val("");
                });
            }
        });
    })
</script>

<script type="text/javascript" th:inline="javascript">

    //城市查询
    function cityList() {
        $("#city_select").html("");
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: window.rootPath + "/ProvinceLinkageController/getCity?pid=" + $("#province_select").val(),
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#city_select").append("<option value='" + data[i].cityCode + "'>" + data[i].cityName + "</option>");

                }
                $("#city_select").select2({
                    placeholder: "请选择"
                }).on("change", function (e) {
                    areaList();
                })
                if (data.length <= 1) {
                    areaList();
                }

            }
        })
    }

    //区县查询
    function areaList() {
        $("#area_select").html("");
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: window.rootPath + "/ProvinceLinkageController/getArea?pid=" + $("#city_select").val(),
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#area_select").append("<option value='" + data[i].areaCode + "'>" + data[i].areaName + "</option>");
                }
                $("#area_select").select2({
                    placeholder: "请选择"
                }).on("change", function (e) {
                    streetList();
                })
                if (data.length <= 1) {
                    streetList();
                }
            }
        })
    }

    //街道查询
    function streetList() {
        $("#street_select").html("");
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: window.rootPath + "/ProvinceLinkageController/getStreet?pid=" + $("#area_select").val(),
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#street_select").append("<option value='" + data[i].streetCode + "'>" + data[i].streetName + "</option>");
                }
                $("#street_select").select2({
                    placeholder: "请选择"
                });
            }
        })
    }

    $(function () {

        $("#province_select").select2({
            placeholder: "请选择"
        }).on("change", function (e) {
            cityList();
        })
        if ($("#province_select option").size() <= 1) {
            cityList();
        }
    })
</script>
</body>
</html>
